<template>
	<view class="body">
		<swiper indicator-color="#666" indicator-active-color="#fff" :indicator-dots="true" :autoplay="autoplay"
			:interval="3000" :duration="1000" @change="onChange">
			<swiper-item v-for="(item, index) in slides" :key="index">
				<view class="swiper-item">
					<image :src="host + item" mode="scaleToFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="opera" v-show="!autoplay">
			<button @click="onLogin">开始体验</button>
		</view>
	</view>
</template>

<script>
	import {
		login,
		loadCover
	} from '@/common/api.js'
	import config from '@/common/config'
	export default {
		data() {
			return {
				host: config.baseUrl,
				slides: [],
				autoplay: true
			}
		},
		onLoad() {
			loadCover().then(pojo => {
				console.log(pojo)
				this.slides = pojo.data
			}).catch(err => {
				console.log(err)
			})
		},
		methods: {
			onChange(e) {
				this.autoplay = e.detail.current != this.slides.length - 1
			},
			onLogin(e) {
				uni.redirectTo({
					url: '/pages/guide/guide'
				})
			}
		}
	}
</script>

<style>
	.body {
		width: 100vw;
		height: 100vh;
		font-size: 12pt;
	}

	swiper {
		width: 100vw;
		height: 100vh;
	}

	image {
		width: 100vw;
		height: 100vh;
	}

	.opera {
		position: relative;
		left: 0;
		bottom: 15vh;
		width: 100vw;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.opera button {
		width: 120px;
		height: 48px;
		border-radius: 24px;
		border: 1px solid white;
		background-color: transparent;
		color: white;
	}

	.setting {
		position: absolute;
		width: auto;
		top: 30px;
		right: 16px;
		background-color: transparent;
		color: aquamarine;
		border: 0;
		font-size: 12pt;
	}
</style>